<template>
	<view class="adv">
		<view class="adv-box">
			<!-- 模板1-->
			<view class="x-f" v-if="detail.type == 1">
				<image style="width:100%;height: 200upx;background-color: rgba(0,0,0,0);" :style="{padding:detail.margin+'px',marginRight:detail.padding+'px',marginLeft:detail.padding+'px'}" :src="detail.list[0].src" @tap="$emit('navtive',detail.list[0].url)" mode="widthFix"></image>
			</view>
			<!-- 模板2-->
			<view class="type1 x-f" v-if="detail.type == 2" :style="{marginRight:detail.padding+'px',marginLeft:detail.padding+'px'}">
				<image class="type1-img" @tap="$emit('navtive',detail.list[0].url)"  :src="detail.list[0].src" :style="{paddingRight:detail.margin/2+'px'}" mode="widthFix"></image>
				<image class="type1-img" @tap="$emit('navtive',detail.list[1].url)" :src="detail.list[1].src" mode="widthFix" :style="{paddingLeft:detail.margin/2+'px'}"></image>
			</view>
			<!-- 模板3-->
			<view class="type1 x-f" v-if="detail.type == 3" :style="{marginRight:detail.padding+'px',marginLeft:detail.padding+'px'}">
				<image class="type2-img" @tap="$emit('navtive',detail.list[0].url)" :src="detail.list[0].src" mode="widthFix" :style="{paddingRight:detail.margin/1.5+'px'}" ></image>
				<image class="type2-img" @tap="$emit('navtive',detail.list[1].url)" :src="detail.list[1].src" mode="widthFix" :style="{paddingLeft:detail.margin/3+'px',paddingRight:detail.margin/3+'px'}"></image>
				<image class="type2-img" @tap="$emit('navtive',detail.list[2].url)" :src="detail.list[2].src" mode="widthFix" :style="{paddingLeft:detail.margin/1.5+'px'}"></image>
			</view>
			<!-- 模板4-->
			<view class="type2 x-bc" v-if="detail.type == 4" :style="{marginRight:detail.padding+'px',marginLeft:detail.padding+'px'}">
				<view class="type2-img1" :style="{paddingRight:detail.margin/2+'px'}">
					<image class="type2-img1img" @tap="$emit('navtive',detail.list[0].url)" :src="detail.list[0].src" mode="aspectFill"></image>
				</view>
				<view class="y-f type2-box" :style="{paddingLeft:detail.margin/2+'px'}">
					<image class="type2-img2" @tap="$emit('navtive',detail.list[0].url)" :src="detail.list[1].src" mode="widthFix"></image>
					<image class="type2-img2" @tap="$emit('navtive',detail.list[1].url)" :src="detail.list[2].src" mode="widthFix" :style="{marginTop:detail.margin+'px'}"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		props: {
			detail: {
				type: Object,
				default: null
			},
			// margin:{
			// 	type:Number,
			// 	default:0
			// },
			// padding:{
			// 	type:Number,
			// 	default:0
			// }
		},
		computed: {},
		created() {
			// console.log(this.detail);
			// this.detail.style = 3;
		},
	}
</script>

<style lang="less">
	.x-bc {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.x-f {
		display: flex;
		align-items: center;
	}
	.adv{
		// background-color: #FFFFFF;
	}
	image{
		height: 100upx;
		display: block;
		// background-color: #FFFFFF;
	}
.adv-box {
	// background-color: #fff;
	overflow: hidden;
	box-sizing: border-box;
	.type1 {
		.type1-img {
			width: 50%;
			// height: 220rpx;
		}
		.type2-img{
			width: 33.3%;
		}
	}
	.type2 {
		.type2-img1 {
			width:50%;
			height: 360upx;
			// height:450rpx;
			// border-right: 1rpx solid #f6f6f6;
			.type2-img1img{
				width: 100%;
				height: 100%;
				// height: 100%;
			}
		}
		.type2-box {
			// height:450rpx;
			width: 50%;
			height: 360upx;
			.type2-img2 {
				width:100%;
				height:180upx;
			}
		}
	}
	.type3 {
		.type3-box {
			.type3-img1 {
				flex: 1;
				height: (340rpx/2);
			}
		}
		.type3-img2 {
			flex: 1;
			height: (340rpx/2);
			width: 100%;
		}
	}
}
</style>
